<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		li {
			height: 30px;
			width: 200px;
			border: 1px solid red;
			/*white-space: normal;	这是默认值，也就是换行*/
			white-space: nowrap;		/* 1、 强制在同一行内显示所有文本，直到文本结束或者遇到br换行标签才换行 */
			overflow: hidden;			/* 2、 超出部分隐藏 */
			text-overflow: ellipsis;	/* 3、 溢出部分用省略号代替 （要做到省略号效果以上三句话一句都不能少）*/
			line-height: 30px;
		}
	</style>
</head>
<body>
	<li>文字内容文字内容文字内容文字内容文字内容</li>
	<li>文字内容文字内容文字内容文字内容文字内容</li>
	<li>文字内容文字内容文字内容文字内容文字内容</li>
	<li>文字内容文字内容文字内容文字内容文字内容</li>
	<li>文字内容文字内容文字内容文字内容文字内容</li>
</body>
</html>